<template>
  <div class="flex items-center gap-0" >
    <el-tooltip :content="$t('btn.search')"  placement="bottom"   effect="light" >
    <el-button
     
      :icon="Search" 
      circle 
      v-if="showSearch"      
      :disabled="disabledSearch"
      @click="handleSearch"
    />
  </el-tooltip>
  <el-tooltip :content="$t('btn.add')"    
                  placement="bottom"  
                  effect="light"   
  >
      <el-button
        type="primary"
        :icon="DocumentAdd"
        circle
        v-if="showAdd"
        :disabled="disabledAdd"
        @click="handleAdd"        
      />
    </el-tooltip>

    <el-tooltip :content="$t('btn.edit')"  placement="bottom"  effect="light" >
      <el-button
        v-if="showEdit"
        type="primary"
        :icon="Edit"
        circle
        :disabled="disabledEdit"
        @click="handleEdit"
      />
    </el-tooltip>

    <el-tooltip :content="$t('btn.preview')"  placement="bottom"  effect="light" >
      <el-button
        v-if="showPreview"
        type="info"
        :icon="View"
        circle
        :disabled="disabledPreview"
        @click="handlePreview"
      />
    </el-tooltip>



    <el-tooltip :content="$t('btn.delete')"   placement="top"   effect="light" >
      <el-button
        v-if="showDelete"
        type="danger"
        :icon="Delete"
        circle
        :disabled="disabledDelete"
        @click="handleDelete"
      />
    </el-tooltip>
    <!-- 注入点 -->
    <slot name="toolbarExtra" />
  </div>
</template>

<script  lang="ts"  setup>
// import { defineProps, defineEmits } from "vue";
import {
    Plus,
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  View,
  DocumentAdd,
  
} from '@element-plus/icons-vue' 
import { ElTooltip } from 'element-plus'; // 导入 ElTooltip


const props = defineProps({
  // 是否显示搜索按钮
  showSearch: {
    type: Boolean,
    default: false,
  },

  // 是否显示新增按钮
  showAdd: {
    type: Boolean,
    default: false,
  },
  // 是否显示修改按钮
  showEdit: {
    type: Boolean,
    default: false,
  },
  // 是否显示删除按钮
  showDelete: {
    type: Boolean,
    default: false,
  },
    // 是否显示预览按钮
  showPreview: {
    type: Boolean,
    default: false,
  },
  // 新增按钮是否禁用
  disabledAdd: {
    type: Boolean,
    default: false,
  },
  // 搜索按钮是否禁用
  disabledSearch: {
    type: Boolean,
    default: false,
  },
  // 修改按钮是否禁用
  disabledEdit: {
    type: Boolean,
    default: false,
  },
  // 删除按钮是否禁用
  disabledDelete: {
    type: Boolean,
    default: true,
  },
  // 是否处于预览模式
  disabledPreview: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["search","add", "edit","preview", "delete"]);

const handleSearch = () => {
  emit("search");
};
const handleAdd = () => {
  emit("add");
};

const handleEdit = () => {
  emit("edit");
};
const handlePreview = () => {
  emit("preview");
};
const handleDelete = () => {
  emit("delete");
};
</script>


